<template>
  <div class="box">
    <!--  navbar  /-->
    <van-nav-bar fixed title="智慧商城" />
    <!--    搜索-->
    <van-search
      placeholder="请输入搜索关键词"
      @focus="$router.push('/search')"
    />
    <!--    轮播图-->
    <van-swipe :autoplay="3000" class="my-swipe" indicator-color="white">
      <van-swipe-item v-for="item in bannerListt" :key="item.imgUrl">
        <img :src="item.imgUrl" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!--    通知-->
    <van-notice-bar
      left-icon="volume-o"
      scrollable
      text="智慧商城2.0全新上线，更多新品等你来选~"
    />
    <!--    导航-->
    <div class="nav">
      <van-grid :column-num="5" icon-size="40">
        <van-grid-item
          v-for="item in navList"
          :key="item.imgUrl"
          :icon="item.imgUrl"
          :text="item.text"
        />
      </van-grid>
    </div>
    <!--    导航下图片-->
    <div class="img">
      <img :src="imgList.imgUrl" />
    </div>
    <!--    分割线-->
    <div class="gooditem">
      <div class="like">
        <van-divider
          :style="{
            color: '#000',
            borderColor: '#000',
            padding: '10px 100px',
          }"
        >
          猜你喜欢
        </van-divider>
      </div>
      <!--    商品列表-->

      <GoodsItem
        v-for="(item, index) in proList"
        :key="index"
        :item="item"
      ></GoodsItem>
    </div>
  </div>
</template>
<script>
import { getHome } from '@/api/home'
import GoodsItem from '@/components/GoodsItem.vue'

export default {
  name: 'homeCom',
  components: { GoodsItem },
  data () {
    return {
      imgList: [], // 图片
      bannerListt: [], // 轮播
      navList: [], // 导航
      proList: [] // 商品
    }
  },
  computed: {},
  methods: {},
  async created () {
    const {
      data: {
        data: { pageData }
      }
    } = await getHome()
    this.bannerListt = pageData.items[1].data
    this.navList = pageData.items[3].data
    this.imgList = pageData.items[4].data[0]
    this.proList = pageData.items[6].data
  }
}
</script>
<style lang="less">
.box {
  .van-nav-bar__content {
    background-color: red;

    .van-nav-bar__title {
      color: #ffffff;
    }
  }

  .van-search {
    margin-top: 46px;

    .van-search__content {
      border-radius: 20px;
    }
  }

  .my-swipe .van-swipe-item img {
    width: 100%;
    height: 185px;
  }

  .img {
    width: 100%;

    img {
      width: 100%;
    }
  }

  .van-notice-bar {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 17px;
  }

  .van-divider--content-center {
    font-size: 18px;
  }

  .gooditem {
    background-color: rgba(192, 192, 192, 0.3);

    .like {
      background-color: white;
    }
  }
}
</style>
